<template>
	<view class="support-page">
		<!-- 即时支持资源部分 -->
		<view class="section">
			<view class="support-list">
				<view class="support-item">
					<text class="support-title">同行支持热线</text>
					<text class="support-desc">7*24小时可用的保密支持热线:xxx</text>
				</view>
				<view class="support-item">
					<text class="support-title">危机干预团队</text>
					<text class="support-desc">医院内部快速响应小组联系方式:xxx</text>
				</view>
				<view class="support-item">
					<text class="support-title">紧急心理咨询</text>
					<text class="support-desc">专业心理服务推荐</text>
				</view>
			</view>
		</view>
		
		
		
		<!-- 情绪管理工具部分 -->
		<view class="section">
			<uni-title type="h2" title="情绪管理工具"></uni-title>
			<uni-list>
				<uni-list-item title="正念冥想指导音频" link @click="navigateToTool('正念冥想指导音频')" ></uni-list-item>
				<uni-list-item title="呼吸练习技巧卡片" link @click="navigateToTool('呼吸练习技巧卡片')" ></uni-list-item>
				<uni-list-item title="第二受害者情绪日记" link @click="navigateToTool('第二受害者情绪日记')" ></uni-list-item>
				<uni-list-item title="压力反应自查清单" link @click="navigateToTool('压力反应自查清单')" ></uni-list-item>
			</uni-list>
		</view>
		<!-- 教育材料部分 -->
		<view class="section">
			<uni-title type="h2" title="教育材料"></uni-title>
			<view class="material-list">
				<view class="material-item">
					<text class="material-title">第二受害者现象说明手册</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			navigateToTool(toolType) {
				// 根据工具类型导航到相应页面
				uni.showToast({
					title: toolType,
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped>
.support-page {
	background-color: #ffffff;
	min-height: 100vh;
	padding: 20rpx;
}

/* 即时支持资源样式 */
.support-list {
	background-color: #ffffff;
}

.support-item {
	margin-bottom: 30rpx;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.support-item:last-child {
	border-bottom: none;
}

.support-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	display: block;
	margin-bottom: 10rpx;
}

.support-desc {
	font-size: 28rpx;
	color: #666666;
	display: block;
}

/* 情绪管理工具样式 */
.tools-list {
	background-color: #ffffff;
}

.tool-item {
	display: flex;
	align-items: center;
	background-color: #fff5e6;
	border: 1rpx solid #e6e6e6;
	border-radius: 12rpx;
	padding: 24rpx 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.tool-item:active {
	background-color: #ffe6cc;
}

.tool-icon {
	width: 60rpx;
	height: 60rpx;
	background-color: #f0f0f0;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.icon-text {
	font-size: 20rpx;
	color: #999999;
}

.tool-content {
	flex: 1;
}

.tool-title {
	font-size: 30rpx;
	color: #333333;
	font-weight: 500;
}

.tool-arrow {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.arrow {
	font-size: 28rpx;
	color: #333333;
}

.lightning {
	font-size: 24rpx;
	color: #007aff;
}
</style>
